
// Variables
// -------------------------

@black:				#000;
@grayDarker:		#222;
@grayDark:			#333;
@gray:				#555;
@grayLight:			#999;
@grayLighter:		#eee;
@white:				#fff;

@bodyBackground:	@white;
@textColor:			@grayDark;

@header:			#2a3f54;
@headerTextColor:	#e5e5e5;
@footer:			@header;
@footerTextColor:	@headerTextColor;

@warningColor:		#FDF3B5;
@errorColor:		#B40000;
@highlight:			#498BF4;


// Mixins
// -------------------------

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: @black) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}

.border-radius (@topleft,@topright,@bottomright,@bottomleft){
	border-radius: @topleft @topright @bottomright @bottomleft;
	-moz-border-radius: @topleft @topright @bottomright @bottomleft;
	-khtml-border-radius: @topleft @topright @bottomright @bottomleft;
	-webkit-border-radius: @topleft @topright @bottomright @bottomleft;
}

.border-radius (@size){
	border-radius: @size;
	-moz-border-radius: @size;
	-khtml-border-radius: @size;
	-webkit-border-radius: @size;
}

.gradient(@from: top, @startColor: #555, @endColor: #333) {
	background-color: mix(@startColor, @endColor, 60%);
	background-image: -moz-linear-gradient(@from, @startColor, @endColor); // FF 3.6+
	background-image: -ms-linear-gradient(@from, @startColor, @endColor); // IE10
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
	background-image: -webkit-linear-gradient(@from, @startColor, @endColor); // Safari 5.1+, Chrome 10+
	background-image: -o-linear-gradient(@from, @startColor, @endColor); // Opera 11.10
	background-image: linear-gradient(@from, @startColor, @endColor); // The standard
	background-repeat: repeat-x;
	filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
}

.box-sizing(@sizing) {
	-moz-box-sizing: @sizing; 
	-webkit-box-sizing: @sizing; 
	box-sizing: @sizing;
}

.transition(@transition) {
	-webkit-transition: @transition;
	-moz-transition: @transition;
	-ms-transition: @transition;
	-o-transition: @transition;
	transition: @transition;
}

.buttoncolor(@textcolor, @bordercolor, @color1, @color2) {
	color: @textcolor;
	border: solid 1px @bordercolor;
	.gradient(top, @color1, @color2);
	
	&:hover {
		.gradient(top, darken(@color1,10%), darken(@color2,10%));
	}
	
	&:active {
		.gradient(top, @color2, @color1);
	}
	
	&[disabled] {
		color:@gray;
		.gradient(top, desaturate(@color1,30%), desaturate(@color2,30%));
		cursor:auto;
	}
}

.animation-delay(@delay){
	animation-delay: @delay;
	-moz-animation-delay: @delay;
	-webkit-animation-delay: @delay;
}
.animation-name(@name){
	animation-name: @name;
	-moz-animation-name: @name;
	-webkit-animation-name: @name;
}
.animation-duration(@duration){
	animation-duration: @duration;
	-moz-animation-duration: @duration;
	-webkit-animation-duration: @duration;
}
.animation-fill-mode(@mode){
	animation-fill-mode: @mode;
	-moz-animation-fill-mode: @mode;
	-webkit-animation-fill-mode: @mode;
}
.animation-iteration-count(@count){
	animation-iteration-count: @count;
	-moz-animation-iteration-count: @count;
	-webkit-animation-iteration-count: @count;
}


// Body
// -------------------------

body, table td, select, button {
  font-family: "Arial Unicode MS", Arial, sans-serif;
  font-size: small;
}

pre {
  font-family: "courier new", courier;
  font-size: small;
}

body {
  color: @grayDark;
  margin: 10px;
  border: 0px;
  padding: 0px;
  background: @white;
  direction: ltr;
}

a, a:visited {
    color: darken(@highlight,20%);
    text-decoration: none;
	
	&:hover {
		text-decoration: underline;
		cursor: pointer;
	}
}


// Form
// -------------------------

.gwt-ListBox {
  padding: 4px 4px;
  border: 1px solid #ccc;
  border-top: 1px solid #999;
}

input, select {
    border: 1px solid @grayLight;
	margin: 0px 2px;
	padding: 6px 4px;
	background: @white;
	color: @black;
	
	&[disabled] {
		background: @grayLighter;
	}
}

// Menubar
// -------------------------

.gwt-MenuBar {

	.gwt-MenuItem {
		cursor: pointer;
	}
	
	.gwt-MenuItem-selected {
		background: @highlight;
	}
}

.gwt-MenuBarPopup {
	background: @white;
	margin: 0px 0px 0px 3px;
	border: 1px solid @grayLight;
	
	.gwt-MenuItem {
		padding-right: 15px;
	}
}

.gwt-MenuBar-horizontal {
	margin: 0;
	text-decoration: none;
	cursor: pointer;
	font-size: small;
	background: @grayLighter;
	border: 1px solid @grayLight;
	.border-radius(3px);
	
	.gwt-MenuItem {
		padding: 3px 3px;
		vertical-align: bottom;
		color: @black;
		font-weight: normal;
	}
	
	.gwt-MenuItemSeparator {
		width: 1px;
		padding: 0px;
		margin: 0px;
		border: 0px;
		border-left: 1px solid @grayLight;
		background: white;
		
		.menuSeparatorInner {
			width: 1px;
			height: 1px;
			background: white; 
		}
	}
}

.gwt-MenuBar-vertical {

	.gwt-MenuItemSeparator {
		padding: 2px 0px;
		
		.menuSeparatorInner {
			height: 1px;
			padding: 0px;
			border: 0px;
			border-top: 1px solid #ccc;
			overflow: hidden;
		}
	}
}

.pony-MenuBar{
	cursor: pointer;
}

.pony-MenuBar-Light{
	background:none;
	border:0;
	
	.gwt-MenuItem{
		color: @grayDark;
		margin: 0;
		background-color: transparent;
		background-image: url("../images/tools_20.png");
		background-position: 5% 55%;
		background-repeat: no-repeat;
		cursor: pointer;
		display: block;
		float: left;
		height: 18px;
		line-height: 18px;
		font-size: 1.1em;
		padding-bottom: 0px;
		padding-left: 22px;
		padding-right: 7px;
		padding-top: 0px;
		text-align: left;
		text-decoration: none;
	}
	
	.gwt-MenuItem-selected {
		color: @grayDark;
		text-decoration:underline; 
	}
}


// Suggest box
// -------------------------

.gwt-SuggestBoxPopup {
	border: 1px solid @grayLight;
	background: @white;
	.border-radius(3px);
	
	.item {
	  padding: 2px 6px;
	  color: @black;
	  cursor: default;
	  font-size: 110%;
	}
	
	.item-selected {
	  background: @highlight;
	}
}


// Decorated panel
// -------------------------

.gwt-DecoratorPanel {
	border: 1px solid @grayLight;
	.border-radius(3px);
}


// Tree
// -------------------------

.gwt-Tree {
	table {
		border-collapse: collapse;
		width: 100%;
		text-align: left;
		border: 1px solid @gray;
		color: @white;
		.gradient(top, @grayLight, @gray)
	}
	
	table td, table th {
		padding: 0;
	}
	
	.gwt-TreeItem {
		padding: 1px 0px;
		margin: 0px;
		white-space: nowrap;
		cursor: pointer;
		
		a {
			color: @white;
		}
	}
}


// Disclosure panel
// -------------------------

.gwt-DisclosurePanel {
	.content {
	}
	
	.gwt-DisclosurePanel-open {
		.header {}
	}
	
	.gwt-DisclosurePanel-closed{
	}
	
	.header {
		a, td {
			color: @grayDark;
			text-decoration: none;
			font-size : 13px;
		}
	}
}


// Tab panel
// -------------------------

.gwt-TabLayoutPanel {

	padding:0;
	border:1px solid @grayLighter;

	.gwt-TabLayoutPanelTabs {
		background: @grayLighter;
		padding-top: 6px;
		padding-left: 5px;
	}
	
	.gwt-TabLayoutPanelContentContainer {
		border-color: @grayLighter;
		border-style: solid;
		border-width: 0px 1px 1px;
	}
	
	.gwt-TabLayoutPanelContent {
		overflow: hidden;
		padding: 0px;
	}
	
	.gwt-TabLayoutPanelTab {
		margin-left: 4px;
		padding: 4px 8px 4px 8px;
		padding-top: 1px;
		cursor: pointer;
		color: @white;
		font-weight: normal;
		text-align: center;
		background: @grayLight;
		.border-radius(3px,3px,0px,0px);
	}
	
	.gwt-TabLayoutPanelTab-selected {
		cursor: default;
		background: @white;
		color: @grayDark;
		font-weight: bold;
	}
}

.gwt-TabPanel {
	border:1px solid @grayLighter;
}

.gwt-TabBar {

	background: @grayLighter;
	padding-top: 6px;
	
	.gwt-TabBarItem {
		margin-left: 4px;
		padding: 4px 8px 4px 8px;
		cursor: pointer;
		cursor: hand;
		color: @white;
		text-align: center;
		background: @grayLight;
		.border-radius(3px,3px,0px,0px);
	}

	.gwt-TabBarItem-selected {
		cursor: default;
		background: @white;
		color: @grayDark;
		font-weight: bold;
	}
}


// Stack panel
// -------------------------

.gwt-StackLayoutPanel {
	.gwt-StackLayoutPanelHeader {
		border-left: 1px solid @white;
		border-right: 1px solid transparent;
		border-top: 1px solid @white;
		cursor: pointer;
		font-family: arial, sans-serif;
		font-size: 12px;
		font-weight: bold;
		height: 15px;	
		padding: 6px 5px 6px 2.2em;
		border-collapse: separate;
		background: @grayLighter no-repeat url(../images/arrow-up.png) 0.5em 50%;
	}
	
	.gwt-StackLayoutPanelHeader-hovering {
		text-decoration: underline;
	}
	
	.gwt-StackLayoutPanelContent {
		background: @white;
		padding: 2px 2px 10px 5px;
		border: 0;
		height: 1px;
	}
	
	.selectedItem {
		border-radius: 3px;
		border: 1px solid @gray;
		color: @white;
		.transition(e("background-color 0.15s linear 0s, border-color 0.15s linear 0s, color 0.15s linear 0s"));
		.gradient(top, @grayLight, @gray);
	}
	
	a {
		color: @grayDark;
		display: block;
		font-size: 11px;
		height: 18px;
		line-height: 18px;
		margin: 2px 0px 2px 0px;
		padding: 0px 5px 0px 5px;
		border: 1px solid @white;
		
		&:hover {
			border-radius: 3px;
			background-color: @grayLighter;
			border: 1px solid @grayLighter;
			color: @grayDark;
			.transition(e("background-color 0.25s linear 0s, border-color 0.25s linear 0s, color 0.25s linear 0s"));
		
			.selectedItem {
				color: white;
			}
		}
		
		&:hover &.selectedItem {
			color: white;
		}
	}
}


// Date picker
// -------------------------

.gwt-DateBox {
  padding: 5px 4px;
  border: 1px solid #ccc;
  border-top: 1px solid #999;
  font-size: 100%;
}
.gwt-DateBox input {
  width: 8em;
}
.dateBoxFormatError {
  background: lighten(@errorColor,60%);
}
.dateBoxPopup {
}

.gwt-DatePicker {
  border: 1px solid @grayLight;
  border-top:1px solid @gray;
  cursor: default;
}
.gwt-DatePicker td,
.datePickerMonthSelector td:focus {
  outline: none;
}
.datePickerDays {
  width: 100%;
  background: @white;
}
.datePickerDay,
.datePickerWeekdayLabel,
.datePickerWeekendLabel {
  font-size: 85%;
  text-align: center;
  padding: 4px;
  outline: none;
  font-weight:bold;
  color:@grayDark;
  border-right: 1px solid @grayLighter;
  border-bottom: 1px solid @grayLighter;
}
.datePickerWeekdayLabel,
.datePickerWeekendLabel {
  background: @white;
  padding: 0px 4px 2px;
  cursor: default;
  color:@grayLight;
  font-size:70%;
  font-weight:normal;
}
.datePickerDay {
  padding: 4px 7px;
  cursor: hand;
  cursor: pointer;
}
.datePickerDayIsWeekend {
  background: lighten(@grayLight,30%);
}
.datePickerDayIsFiller {
  color: @grayLight;
  font-weight:normal;
}
.datePickerDayIsValue {
  background: lighten(@grayLight,20%);
}
.datePickerDayIsDisabled {
  color: lighten(@grayLight,10%);
  font-style: italic;
}
.datePickerDayIsHighlighted {
  background: @highlight;
}
.datePickerDayIsValueAndHighlighted {
  background: desaturate(@highlight,40%);
}
.datePickerDayIsToday {
  padding: 3px;
  color: @white;
  background: mix(@grayLight, blue, 75%);
}

.datePickerMonthSelector {
  width: 100%;
  padding: 1px 0 5px 0;
  background: @white;
}
td.datePickerMonth {
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  font-size: 100%;
  font-weight: bold;
  color: @grayDark;
}
.datePickerPreviousButton,
.datePickerNextButton {
  font-size: 120%;
  line-height: 1em;
  color: mix(@grayLight, blue, 75%);
  cursor: hand;
  cursor: pointer;
  font-weight: bold;
  padding: 0px 4px;
  outline: none;
}


// Split Layout
// -------------------------

.gwt-SplitLayoutPanel-HDragger {
  background: #e7e7e7 url(../images/thumb_vertical.png) center center no-repeat;
  cursor: col-resize;
}

.gwt-SplitLayoutPanel-VDragger {
  background: #e7e7e7 url(../images/thumb_horz.png) center center no-repeat;
  cursor: row-resize;
}


// Buttons
// -------------------------

.pony-PButton {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	margin: 0 2px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding:0 .6em;
	line-height: 27px;
	.border-radius(.2em);
	.box-shadow(0,1px,4px,rgba(0,0,0,.3));
	
	&:hover {
		text-decoration: none;
	}
	
	&:active {
		position: relative;
		top: 1px;
	}
}

.black {
	.buttoncolor(#d7d7d7, #333, #666, #000);
}
 
.gray {
	.buttoncolor(#e9e9e9, #555, #888, #575757);
}
 
.white {
	.buttoncolor(black, #b7b7b7, #fff, #ededed);
}
 
.orange {
	.buttoncolor(#fef4e9, #da7c0c, #faa51a, #f47a20);
}
 
.red {
	.buttoncolor(#faddde, #980c10, #ed1c24, #aa1317);
}
 
.blue {
	.buttoncolor(#d9eef7, #0076a3, #00adee, #0078a5);
}
 
.rosy {
	.buttoncolor(#fae7e9, #b73948, #f16c7c, #bf404f);
}

.green {
	.buttoncolor(#e8f0de, #538312, #7db72f, #4e7d0e);
}
 
.pink {
	.buttoncolor(#feeef5, #d2729e, #feb1d3, #f171ab);
}

.accent {
	.buttoncolor(lighten(@highlight,50%), darken(@highlight,10%), lighten(@highlight,10%), darken(@highlight,10%));
}


// Popup
// -------------------------

.gwt-PopupPanel {
	border: 3px solid @grayLight;
	padding: 3px;
	background: white;
}

.gwt-PopupPanelGlass {
	background-color: #000;
	opacity: 0.3;
	filter: alpha(opacity=30);
}

.pony-DialogBox {
	.dialogTopCenterInner {
		border:1px solid @gray;
		color: @white;
		text-decoration: none;
		padding:.1em 0 .1em 5px;
		.border-radius(.5em,.5em,0px,0px);
		.gradient(top, @grayLight, @gray);
	}
	
	.dialogContent {
		background-color: @white;
		border:1px solid @gray;
		border-bottom:none;
		padding:.5em 0 0 0;
	}
	
	.dialogControls {
		background-color: darken(@white, 10%);
		margin-top:.5em;
		width:100%;
		border-top:1px solid darken(@white, 10%);
		padding-top: 0.4em;
	}
	
	.dialogBottomCenterInner {
		background-color: darken(@white, 10%);
		border:1px solid @gray;
		border-top:none;
		height:.5em;
		margin-bottom: 5px;
		.border-radius(0px,0px,.5em,.5em);
		.box-shadow(0,3px,2px,rgba(0,0,0,.2));
	}
}

.pony-closable-dialog-box {
	cursor: default;
	border:1px solid @gray;
	background-color: white;
	.border-radius(0.5em,0.5em,0.5em,0.5em);
	.box-shadow(0,3px,2px,rgba(0,0,0,.2));
	
	.header {
		font-weight: bold;
		padding: 0.5em;
		.gradient(top, @grayLight, @grayLight);
	}
	
	.caption {
		padding-left: 0.5em;
	}
	
	.close {
		padding-right: 0.5em;
		cursor: pointer;
	}
	
	.content {
		padding-left: 0.5em;
		padding-right: 0.5em;
		padding-top: 1em;
		padding-bottom: 1em;
	}
}


// Loading pulse
// -------------------------

.pony-Loading{
  .animation-name(boxPulse);
  .animation-duration(2s);
  .animation-iteration-count(infinite);
  .animation-delay(0s);
}
.pony-Loading:hover {}


// Notification
// -------------------------

.pony-notification {

	padding: 1em;
	font-size: 1.5em;
	font-weight: bold;
	opacity: 0.9;
	.border-radius(4px);
	
	&.humanized {
		color: @white;
		background: @grayLight;
		border: 0px;
	}
	
	&.warning {
		color: mix(@warningColor, @gray, 50%);
		background: @warningColor;
		border: opx;
	}
	
	&.error {
		background: @errorColor;
		border: 3px solid darken(@errorColor, 10%);
		background-image: url("../images/close_16.png");
		background-position: top right;
		background-repeat: no-repeat;
		cursor: pointer;
		color: @white;
	}
	
	&.tray {
		font-size: 1em;
		opacity: 1;
		color: @white;
		background: @gray;
		border: 2px solid @grayLight;
	}
}

.pony-notification.humanized.closing, .pony-notification.warning.closing, .pony-notification.tray.closing {
	.animation-name(notificationFadeOut);
	.animation-duration(1500ms);
  	.animation-fill-mode(forwards);
}

.pony-notification.humanized.closing {
  	.animation-delay(1000ms);
}
.pony-notification.warning.closing {
  	.animation-delay(2000ms);
}
.pony-notification.tray.closing {
  	.animation-delay(2000ms);
}


// Animation definition
// -------------------------

@keyframes notificationFadeOut {
	from { opacity: 1 }
	to {  opacity: 0 }
}

@-moz-keyframes notificationFadeOut {
	from { opacity: 1 }
	to {  opacity: 0 }
}
@-webkit-keyframes notificationFadeOut {
	from { opacity: 1 }
	to {  opacity: 0 }
}

@keyframes boxPulse {
	from { box-shadow: 0px 0px 0px #0099ff }
	50% { box-shadow: 0px 0px 15px #0099ff }
	to {  box-shadow: 0px 0px 0px #0099ff }
}

@-moz-keyframes boxPulse {
	0% { -moz-box-shadow: 0px 0px 0px #0099ff }
	50% { -moz-box-shadow: 0px 0px 15px #0099ff }
	100% {  -moz-box-shadow: 0px 0px 0px #0099ff }
}

@-webkit-keyframes boxPulse {
	from { -webkit-box-shadow: 0px 0px 0px #0099ff }
	50% { -webkit-box-shadow: 0px 0px 15px #0099ff }
	to {  -webkit-box-shadow: 0px 0px 0px #0099ff }
}


// FormField tooltip
// -------------------------

.htooltip{
	color : @errorColor;
	text-decoration: none;
	
	span {
		text-align:left;
		background-color: @gray;
		.border-radius(15px,15px,15px,0px);
		.box-shadow(1px,1px,10px,rgba(0,0,0,0.5));
		color: @white;
		margin-left: 2px;
		margin-top: -30px;
		opacity: 0;
		padding: 10px 10px 10px 20px;
		position: absolute;
		text-decoration: none;
		visibility: hidden;
		width: 300px;
		z-index: 1000;
		
		img {
			border: 0 none;
			top:-5px;
			left:-5px;
			opacity: 0;
			position: absolute;
			visibility: hidden;	
			z-index: 2000;
		}
	}
	
	&:hover span {
		opacity: 0.8;
		visibility: visible;
		
		img {
			opacity: 1;
			visibility: visible;
		}
	}
}


// FormField Component
// -------------------------

.pony-Form-FormField-Component{
	width:100%;
}

.pony-Form-FormField-Component .pony-PFlextable-Cell .gwt-Label{
	padding-left : 2px;
}


// Login page
// -------------------------

.pony-LoginPage {
	font-family: Lucida, Arial, Geneva, Verdana, "Lucida Grande", Tahoma, Helvetica, sans-serif;
	font-size: 11px;
	color: @grayLight;
	margin-top: 10em;
	border: 1px solid @grayLighter;
	margin-left: auto;
	margin-right: auto;
	width: 450px;
	height: 250px;
	padding: 1em;
	.border-radius(0.4em);
	.box-shadow(0,0.2em,1em,@gray);
}

.pony-LoginPage-LoginTextBox {
	background: lighten(@grayLighter, 5%);
	font-size: 1.8em;
	border: 2px solid @grayLighter;
	line-height: 1.8em;
	font-weight: bold;
	width: 100%;
	.box-sizing(border-box);
}

.pony-LoginPage-PasswordTextBox {
	background: lighten(@grayLighter, 5%);
	font-size: 1.8em;
	border: 2px solid @grayLighter;
	line-height: 1.8em;
	font-weight: bold;
	width: 100%;
	margin-bottom: 0.8em;
	.box-sizing(border-box);
}

.pony-LoginPage-SubmitButton {}

.pony-LoginPage-VersionInformation {
	margin-bottom: 0.8em;
	font-style: italic;
	padding-right:10px;
}

.pony-LoginPage-Label {
	text-align: right;
}

.pony-LoginPage-Logo {
	font-size: 2em;
	font-weight: bold;
	margin-left: 0;
	margin-top: 0.2em;
	margin-bottom: 1em;
}


// Header
// -------------------------

.pony-Header {
	background-color: @header;
	width:100%;
	height:100%;
	border-spacing: 0px;
	border-collapse: collapse;
}

.pony-Header-Logo {
	font-size: 1.3em;
	color: @headerTextColor;
	font-weight: bold;
	margin-left: 5px;
}


// Footer
// -------------------------

.pony-Footer {
	background-color: @footer;
	color: @footerTextColor;
	
	.gwt-Label {
		font-size: 0.9em;
	}
}


// Page
// -------------------------

.pony-Page {
}
.pony-Page-Body {
	width: 100%;
}
.pony-Page-Header {
	white-space: nowrap;
	border-bottom: 1px solid @grayLighter;
	clear: left;
	color: @grayDark;
	cursor: default;
	display: block;
	height: 20px;
	padding:0;
	text-align: left;
	margin: 0;
}
.pony-Page-Header-Caption {
	clear: none;
	float: left;
	font-family: 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
	font-size: 1.3em;
	font-weight: bold;
	height: 30px;
	line-height: normal;
	padding-left:5px;
	white-space: nowrap;
}


// Log list
// -------------------------

.pony-LogsListPanel {
	.gwt-Anchor {
		font-size: x-small;
	}
	.gwt-Label {
		font-size: x-small;
	}
	.pony-LogsListPanel-LogsPanel {
		padding-left: 0.5em;
		padding-right: 0.5em;
		padding-top: 0.1em;
		padding-bottom: 0.1em;
	}
	.pony-LogsListPanel-ActionPanel {
		padding-left: 0.5em;
		border-bottom: 1px solid @gray;
		border-bottom-width: thin;
		width: 11em;
	}
}


// Simple list / Complex list
// -------------------------

.pony-PFlexTable{
	border-spacing: 0px;
	border-collapse: collapse;
}

.pony-SimpleList-Row {
	.pony-PFlextable-Cell{
		white-space: nowrap;
		margin-left:2px;
		margin-right:2px;
		border-bottom:1px solid @grayLighter;
		background-color: darken(@grayLighter,5%);
	}
}

.pony-SimpleList-Row-Selected  {
	.pony-PFlextable-Cell{
		background-color: @highlight;
	}
}

.pony-SimpleList-SubRow  {
	.pony-PFlextable-Cell {
		white-space: nowrap;
		background-color: saturate(@grayLighter,40%);
		margin-left:2px;
		margin-right:2px;
	}
}

.pony-Toolbar{
	padding:.5em 0;
	
	td{
		padding:1px;
	}
}

.pony-Toolbar-Separator{
	width: 1em;
}

.pony-ActionToolbar {
	border: solid 1px @grayLight;
	padding:0;
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	.border-radius(.2em);
	.box-shadow(0px,1px,2px,rgba(0,0,0,.2));
	.gradient(top, @white, @grayLighter);
	
	.gwt-MenuItem {
	  cursor: pointer;
	  font-family: Arial Unicode MS, Arial, sans-serif;
	  padding:.5em;
	}
	
	.gwt-MenuItemSeparator {
		width: 1px;
		padding: 0px;
		margin: 0px;
		border: 0px;
		border-left: 1px solid lighten(@grayLight,10%);
		background: @white;
	}

	.gwt-MenuItem-selected {
		.border-radius(.2em);
		.box-shadow(0px,1px,2px,rgba(0,0,0,.2));
		.gradient(top, @white, lighten(@grayLight,20%));
		
		&:active { 
			color: @black;
			.gradient(top, lighten(@grayLight,20%), @white);
		}
	}
}

.pony-ComplexList {
	margin: 1.5em 1em;
}

.pony-ComplexList-OptionSelectionPanel {
	background-color: @highlight;
	text-align:center;
	border-bottom:1px solid @grayLighter;
	padding:.5em 0;
	width:100%;
}

.pony-ComplexList-ColumnHeader  {

	.pony-PFlextable-Cell {
		border-collapse: separate;
		border-right: 1px solid @grayLight;
		border-bottom: 1px solid @gray;
		color: @white;
		font-size: 13px;
		text-decoration: none;
		text-align: center;
		vertical-align: middle;
		.gradient(top, #999, #666);
		
		a {
			color :@white;
		}
		
		.gwt-CheckBox{}
		
		.gwt-Label{
			padding-top: 4px;
			padding-left:2px;
			padding-right : 2px;
		}
		
		.sortable {
			padding-right: 20px;
			padding-left: 20px;
			.box-sizing(border-box); 
		}
	}
	
	.gwt-TextBox{
		height:9px;
		font-size:9px;
		margin-right: 1px;
		margin-top: 0px;
	}
	
	.gwt-ListBox{
		height:20px;
		font-size:9px;
	}
	
	.sortable{
		width: 100%;
		height: 100%;
		height: 20px;
		cursor: pointer;
		text-align: center;
		display: block;
		padding-left: 18px;
		padding-right: 18px;
		
		&.ascending {
			background: url('../images/down_16.png') no-repeat 98% 65%;
		}
		
		&.descending {
			background: url('../images/up_16.png') no-repeat 98% 65%;
		}
	}
}

.pony-ComplexList-Details-Plus{
	background:url('../images/plus_12_light.png') no-repeat;
	width:12px;
	height:12px;
	display:block;
	
	&:hover{
		background:url('../images/plus_12_dark.png')  no-repeat;
	}
}

.pony-ComplexList-Details-Minus{
	background:url('../images/minus_12_light.png')  no-repeat;
	width:12px;
	height:12px;
	display:block;
	
	&:hover{
		background:url('../images/minus_12_dark.png') no-repeat;
	}
}

.pony-ComplexList-HeaderCellRenderer-DateRange{
	background:url('../images/filter_12_white.png') no-repeat;
	width:12px;
	height:12px;
	display:block;
	padding-bottom: 2px;
	
	&:hover{
		background:url('../images/filter_12_dark.png') no-repeat;
	}
}

.pony-ComplexList-HeaderCellRenderer-MainCheckBox{
}

.pony-ComplexList-bottomList{
	background-color: @grayLighter;
	border-bottom: 1px solid @grayLighter;
	border-top: 1px solid @grayLighter;
	color: @black;
	font-size: 11px;
	text-decoration: none;
	margin: 1.5em 1em 1.5em 1em;
}

.pony-ComplexList-Fill-column{
	width:100%;
}

.pony-PCPositionPanel-Floating{
	background-color: @white;
	.box-shadow(0px,2px,0px,rgba(0,0,0,.2));
	overflow:hidden;
}


// Used by sample ... should be remove from default style and theme
// -------------------------

.pony-Header-AccountMenu {
	color: #FFF;
	font-weight:bold;
	display: block;
	font-size: 1em;
	font-weight: normal;
	margin:0; 
	margin-right:30px; 
	padding:6px; 
	white-space: nowrap;
	width: 5em;
}

.pony-Header-AccountMenu:hover {
	color: #85acd3;
	outline:none;
	text-decoration:none !important
}

.pony-Header-AccountMenu-Selected {
	background-color: #FFF;
	color: #85acd3;
	z-index: 1000;
	position: relative;
}

.pony-Header-AccountMenu-Popup {
	background-color: white;
	border: 1px solid #BEBEBE;
	.box-shadow(0px,1px,5px,#CCC);
	margin: 0px;
	padding:5px;
	position: absolute;
	width: 230px;
	z-index: 999;
}

.pony-Header-AccountMenu-Popup-UserName {
	color: black;
	font-weight: bold;
}

.pony-Header-AccountMenu-Popup-UserLogin {
	color: #666;
	display: block;
}


// TODO
// -------------------------

.pony-LoadingMessageBox {
	background-color: #FFF1A8;
	background-image: linear-gradient(bottom, rgb(255,224,144) 44%, rgb(255,242,176) 72%);
	background-image: -o-linear-gradient(bottom, rgb(255,224,144) 44%, rgb(255,242,176) 72%);
	background-image: -moz-linear-gradient(bottom, rgb(255,224,144) 44%, rgb(255,242,176) 72%);
	background-image: -webkit-linear-gradient(bottom, rgb(255,224,144) 44%, rgb(255,242,176) 72%);
	background-image: -ms-linear-gradient(bottom, rgb(255,224,144) 44%, rgb(255,242,176) 72%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.44, rgb(255,224,144)),
		color-stop(0.72, rgb(255,242,176))
	);
	color: black;
	left: 50%;
	padding: 3px 6px;
	position: fixed;
	top: 0;
	font-weight: bold;
	.box-shadow(0,-3px,5px);
	.border-radius(0,0,5px,5px);
	z-index: 10000
}


// TODO Oracle

.pony-OracleListBox-Select {
	background-color: transparent;
	background-origin: padding-box;
	background-position: 0% -597px;
	color: #222;
	cursor: default;
	display: block;
	float: right;
	font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
	font-size: 12px;
	height: 24px;
	line-height: normal;
	overflow-x: hidden;
	overflow-y: hidden;
	text-align: left;
	white-space: nowrap;
	width: 25px;
}
.pony-OracleListBox-Select:hover {
	background-position: left -622px;
	border:1 px solid red;
}
.pony-Oracle-PopupPanel {
	border: 1px solid #eee;
	background: #f8f8f9;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	overflow: hidden;
}
.pony-Oracle-pagination {
	display: block;
	text-shadow: #e9eaeb 0 1px 0;
	font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
	font-size: 11px;
	line-height: normal;
	width: 100%;
	padding: 3px 0;
	height: 11px;
	overflow: hidden;
	background-repeat: repeat-x;
  	background-position: left -874px;
  	background: #f8f8f9;
	-webkit-border-bottom-left-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	-webkit-user-select: none;
	color: #222;
	white-space: nowrap;
	text-align: center;
  	background: #CCCCCC;
}

.pony-OracleListBox-Selected {
	background: #E3E8F3;
}

.pony-Oracle-Arrow{
	overflow: hidden;
	cursor: pointer;
	height : 15px;
}

.pony-Oracle-Arrow-Down{background: #EEE no-repeat url(../images/treeDownTriangleBlack.png) 0.5em 50%;background-position: center}
.pony-Oracle-Arrow-Down:hover{background: #C0C0C0 no-repeat url(../images/treeDownTriangleBlack.png) 0.5em 50%;background-position: center}
.pony-Oracle-Arrow-Up{background: #EEE no-repeat url(../images/treeUpTriangleBlack.png) 0.5em 50%;background-position: center}
.pony-Oracle-Arrow-Up:hover{background: #C0C0C0 no-repeat url(../images/treeUpTriangleBlack.png) 0.5em 50%;background-position: center}
.pony-Oracle-Item:hover{background: #E3E8F3;cursor: default}
.pony-Oracle-TextBox{padding: 7px 6px;border: 1px solid #ccc;border: solid 1px #B7B7B7;border-collapse: separate;border-spacing: 2px}

.pony-MultiSelectListBox{
	position : relative;
	margin:0px;
	padding:0px;
	width : 500px;
}

.pony-MultiSelectListBox-SelectedItemsPanel{
	border : 1px solid #CCC;
	cursor: text;
	padding : 5px;
	min-height:27px;
}


.pony-MultiSelectListBox-PopupPanel{
	margin-top:3px;
	border : 1px solid #CCC;
	border-top:none;
	.box-shadow(3px,3px,2px,rgba(0,0,0,.2));
}

.pony-MultiSelectListBox-ItemsSelectionPanel{
}

ul.pony-MultiSelectListBox-ItemsSelectionPanel{
	background: #FFF;
	margin: 0;
	list-style: none;
	padding: 0;
	margin-top:5px;
}

ul.pony-MultiSelectListBox-ItemsSelectionPanel li{
	cursor:pointer;
}
ul.pony-MultiSelectListBox-ItemsSelectionPanel li:hover{
	background: #498bf4;
}

ul.pony-MultiSelectListBox-ItemsSelectionPanel a{
	display: block;
	padding-left:7px;
	text-decoration: none;
}

ul.pony-MultiSelectListBox-ItemsSelectionPanel a:hover{
	color:#FFF;
}

.pony-MultiSelectListBox-ItemsSelectionPanel .gwt-HTML{
	margin : 5px;
}

.pony-MultiSelectListBox-ValueItem {
	display: inline-block;
	margin : 3px;
}

.pony-MultiSelectListBox-ValueItem span{
	background: none;
	border: none;
	height: 16px;
	margin: 0;
	padding: 0;
	color: #036;
	font-size: 14px;
	padding: 0;
}

.pony-MultiSelectListBox-ValueItem span.pony-MultiSelectListBox-ValueText{
	background: #d0dfee;
	background-position: 0 -16px;
	font-size: 11px;
	padding: 3px;
	white-space: nowrap;
	border:1px solid #56aaff;
	.border-radius(4px);
}

